<template>
  <div>
    <div class="header">
      <h1
        class="header-title"
        style="margin:0;
					padding:0;
					line-height:64px;
					text-align:center;
					font-size:28px;
					font-weight:400;
					color:#e9c29d;"
      >乌海及其周边地区污染源成因及其对策大数据分析平台</h1>
    </div>
    <div class="wrapper">
      <div class="content">
        <div class="col col-l">
          <div class="xpanel-wrapper xpanel-wrapper-40">
            <div class="xpanel xpanel-l-t">
              <!-- <div class="title">标题一</div> -->
              <div class="body-cjw pd-10">
                <div id="bar-chart-div-one" class="body-cjw"></div>
              </div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-45">
            <div class="xpanel xpanel-r-b">
              <!-- <div class="title">标题六</div> -->
              <div class="body-cjw pd-10">
                <div id="text-div-one" class="body-cjw text-white">
                  <!-- <a-table
                    :dataSource="dataSource"
                    :columns="columns"
                    rowKey="kid"
                   
                    size="middle"
                  >
                    <template slot="actionRender" slot-scope="text, record">
                      <a-tooltip placement="right">
                        <template slot="title">
                          <span>详情</span>
                        </template>
                        <a @click="monitorPointLocate(record.jcdbh)">
                          <i class="fa fa-location-arrow"></i>
                        </a>
                      </a-tooltip>
                    </template>
                  </a-table>-->
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">烟尘浓度</span>
                    </a-col>
                    <a-col :span="6">253mg/m³</a-col>
                    <a-col :span="8">
                      <trend :type="true" term="周同比" :percentage="12" style="margin-right: 16px;"></trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">SO₂浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                  <a-row style="margin-top:10px;">
                    <a-col :span="7" :offset="2">
                      <span class="text-label">NOx浓度</span>
                    </a-col>
                    <a-col :span="6">162mg/m³</a-col>
                    <a-col :span="8">
                      <trend
                        :type="true"
                        term="周同比"
                        :percentage="12"
                        style="margin-right: 16px;"
                      >12%</trend>
                      <trend :type="false" term="日同比" :percentage="11"></trend>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-c">
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div id="mapDiv" class="xpanel no-bg">
              <openlayer-map :mapHeight="contentHeight-460"></openlayer-map>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-25">
            <div class="xpanel xpanel-c-b">
              <!-- <div class="title title-long">标题三</div> -->
              <div class="body-cjw pd-10">
                <div id="pie-chart-div-one" class="body-cjw"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-r">
          <div class="xpanel-wrapper xpanel-wrapper-25">
            <div class="xpanel xpanel-r-t">
              <!-- <div class="title">标题四</div> -->
              <div class="body-cjw pd-10">
                <div id="bar-chart-div-two" class="body-cjw"></div>
              </div>
            </div>
          </div>
          <div class="xpanel-wrapper xpanel-wrapper-60">
            <div class="xpanel xpanel-l-b">
              <!-- <div class="title">标题二</div> -->
              <div class="body-cjw pd-10">
                <div id="text-div-two" class="body-cjw text-white">
                  <div class="chart-wrapper">
                    <h3 class="chart-title">统计数据</h3>
                    <div class="chart-div chart-done">
                      <table class="data-t">
                        <tr>
                          <th>
                            <img src="../../assets/images/display/icon-01.png">
                          </th>
                          <td>
                            <p>
                              <span id="listedCompany">3547</span>
                            </p>
                            <p>上市公司数</p>
                          </td>
                          <th>
                            <img src="../../assets/images/display/icon-02.png">
                          </th>
                          <td>
                            <p>
                              <span id="listedSecurity">20018</span>
                            </p>
                            <p>上市证券数</p>
                          </td>
                        </tr>
                        <tr>
                          <th>
                            <img src="../../assets/images/display/icon-03.png">
                          </th>
                          <td>
                            <p>
                              <span id="totalMarket">455294.10</span>
                            </p>
                            <p>股票总市值（亿元）</p>
                          </td>
                          <th>
                            <img src="../../assets/images/display/icon-04.png">
                          </th>
                          <td>
                            <p>
                              <span id="circulationMarket">370447.90</span>
                            </p>
                            <p>股票流通市值（亿元）</p>
                          </td>
                        </tr>
                        <tr>
                          <th>
                            <img src="../../assets/images/display/icon-05.png">
                          </th>
                          <td>
                            <p>
                              <span id="shRatio">13.16</span>
                            </p>
                            <p>上市平均市盈率</p>
                          </td>
                          <th>
                            <img src="../../assets/images/display/icon-06.png">
                          </th>
                          <td>
                            <p>
                              <span id="szRatio">20.99</span>
                            </p>
                            <p>深市平均市盈率</p>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="menu"></div>
      </div>
      
    </div>
  </div>
</template>
<script>
import './index.css';
import Trend from '../../components/display/Trend.vue';
// import BarChart from '../../components/display/BarChart.vue';
// let config = require('../../config/config');
// import Utils from '../../scripts/Utils';
import OpenlayerMap from '../../components/mainContent/OpenLayerMap.vue';
export default {
  name: 'display',
  components: { Trend, OpenlayerMap },
  data() {
    return {
      columns: [
        {
          title: '排污口名称',
          dataIndex: 'qypwk',
          key: 'qypwk',
          align: 'center'
        },
        {
          title: '企业名称',
          dataIndex: 'qyname',
          key: 'qyname',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 65,
          align: 'center',
          scopedSlots: {
            customRender: 'actionRender'
          }
        }
      ],
      dataSource: [
        {
          kid: 1,
          qypwk: '001',
          qyname: 'QY001'
        },
        {
          kid: 2,
          qypwk: '002',
          qyname: 'QY002'
        },
        {
          kid: 3,
          qypwk: '003',
          qyname: 'QY003'
        },
        {
          kid: 4,
          qypwk: '004',
          qyname: 'QY004'
        },
        {
          kid: 5,
          qypwk: '005',
          qyname: 'QY005'
        },
        {
          kid: 6,
          qypwk: '006',
          qyname: 'QY006'
        },
        {
          kid: 7,
          qypwk: '007',
          qyname: 'QY007'
        }
      ],
      contentHeight: 0,
      barChartOne: null,
      barChartTwo: null,
      pieChartOne: null
    };
  },
  mounted() {
    let windowHeight = document.documentElement.clientHeight;
    this.contentHeight = windowHeight;
    this.updateAllCharts();
  },
  methods: {
    updateAllCharts() {
      this.initBarChartOne();
      this.initBarChartTwo();
      this.initPieChartOne();
    },
    initBarChartOne() {
      let chartDiv = document.getElementById('bar-chart-div-one');
      this.barChartOne = this.$echarts.init(chartDiv);

      var XData = [
        '甘肃',
        '青海',
        '内蒙古',
        '重庆',
        '山西',
        '辽宁',
        '吉林',
        '黑龙江',
        '江苏',
        '浙江',
        '安徽',
        '江西',
        '山东',
        '河南'
      ];
      var yData = [];
      XData.map(function() {
        yData.push((Math.random() * 1000 + 100).toFixed(0));
      });
      var dataMin = parseInt(Math.min.apply(null, yData) / 2);
      let option = {
        title: {
          text: '柱状图标题',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          data: XData,
          axisLabel: {
            formatter: function(value) {
              var ret = ''; //拼接加\n返回的类目项
              var maxLength = 1; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ''; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n';
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            interval: 0,
            fontSize: 16,
            fontWeight: 100,
            textStyle: {
              color: '#9faeb5'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4d4d4d'
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          min: dataMin,
          axisLabel: {
            textStyle: {
              color: '#9faeb5',
              fontSize: 16
            }
          },
          axisLine: {
            lineStyle: {
              color: '#4d4d4d'
            }
          }
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 12
          },
          formatter: '{b0}:{c0}'
        },
        series: {
          type: 'bar',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00d386' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0076fc' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
              // barBorderRadius: 15,
            }
          },
          // barWidth: 7,
          data: yData
        }
      };
      this.barChartOne.setOption(option);
      window.onresize = this.barChartOne;
    },
    initBarChartTwo() {
      let chartDiv = document.getElementById('bar-chart-div-two');
      this.barChartTwo = this.$echarts.init(chartDiv);

      var maxData = 100;

      let option = {
        tooltip: {},
        xAxis: {
          max: maxData,
          splitLine: {
            show: false
          },
          offset: 10,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          data: ['系统名称1', '系统名称2'],
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              color: '#999',
              fontSize: 16
            }
          }
        },
        grid: {
          top: 'center',
          height: 200,
          left: 100,
          right: 100
        },
        series: [
          {
            // 外边框
            name: '',
            type: 'pictorialBar',
            symbol: 'reat',
            //barWidth: '10%',
            symbolOffset: ['-1%', 0], //位置
            symbolSize: ['102%', 24],
            itemStyle: {
              normal: {
                color: 'rgba(54,215,182,0.27)'
              }
            },
            z: -180, //图层
            symbolRepeat: null,
            symbolBoundingData: maxData,
            data: [33.8, 66.3],
            animationEasing: 'elasticOut'
          },
          {
            // 内边框
            name: '',
            type: 'pictorialBar',
            symbol: 'reat',
            //barWidth: '9%',
            //barMaxWidth: '20%',
            symbolOffset: ['-0.5%', 0],
            symbolSize: ['101%', 22],
            itemStyle: {
              normal: {
                color: 'black'
              }
            },
            z: -20,
            symbolRepeat: null,
            symbolBoundingData: maxData,
            data: [33.8, 66.3],
            animationEasing: 'elasticOut'
          },

          {
            // current data
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: '#36d7b6'
              }
            },
            symbolRepeat: 'fixed',
            symbolMargin: '5%',
            symbolClip: true,
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: [33.8, 66.3],
            z: 99999999,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
              return params.index * 30;
            }
          },
          {
            // full data
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: 'rgba(54,215,182,0.27)'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value;
                },
                position: 'right',
                offset: [10, 0],
                textStyle: {
                  color: 'darkorange',
                  fontSize: 18
                }
              }
            },
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '5%',
            symbol: 'rect',
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: [33.8, 66.3],
            z: 99999,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
              return params.index * 30;
            }
          }
        ]
      };
      this.barChartTwo.setOption(option);
      window.onresize = this.barChartTwo;
    },
    initPieChartOne() {
      let chartDiv = document.getElementById('pie-chart-div-one');
      this.pieChartOne = this.$echarts.init(chartDiv);

      var highlight = '#03b7c9';

      var demoData = [
        {
          name: '设备1',
          value: 120,
          unit: '',
          pos: ['16.6%', '55%'],
          range: [0, 200]
        },
        {
          name: '设备2',
          value: 32,
          unit: '',
          pos: ['49.8%', '55%'],
          range: [0, 60]
        },
        {
          name: '设备3',
          value: 0.9,
          pos: ['83%', '55%'],
          range: [0.1, 1.0],
          splitNum: 9
        }
      ];

      let option = {
        series: (function() {
          var result = [];

          demoData.forEach(function(item) {
            result.push(
              // 外围刻度
              {
                type: 'gauge',
                center: item.pos,
                radius: '65%', // 1行3个
                splitNumber: item.splitNum || 10,
                min: item.range[0],
                max: item.range[1],
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, highlight]]
                  }
                },
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: highlight,
                    width: 1
                  },
                  length: -5,
                  splitNumber: 10
                },
                splitLine: {
                  show: true,
                  length: -14,
                  lineStyle: {
                    color: highlight
                  }
                },
                axisLabel: {
                  distance: -20,
                  textStyle: {
                    color: highlight,
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                pointer: {
                  show: 0
                },
                detail: {
                  show: 0
                }
              },

              // 内侧指针、数值显示
              {
                name: item.name,
                type: 'gauge',
                center: item.pos,
                radius: '60%',
                startAngle: 225,
                endAngle: -45,
                min: item.range[0],
                max: item.range[1],
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 16,
                    color: [[1, 'rgba(255,255,255,.1)']]
                  }
                },
                axisTick: {
                  show: 0
                },
                splitLine: {
                  show: 0
                },
                axisLabel: {
                  show: 0
                },
                pointer: {
                  show: true,
                  length: '105%'
                },
                detail: {
                  show: true,
                  offsetCenter: [0, '100%'],
                  textStyle: {
                    fontSize: 20,
                    color: '#fff'
                  },
                  formatter: [
                    '{value} ' + (item.unit || ''),
                    '{name|' + item.name + '}'
                  ].join('\n'),
                  rich: {
                    name: {
                      fontSize: 14,
                      lineHeight: 30,
                      color: '#ddd'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: highlight
                  }
                },
                data: [
                  {
                    value: item.value
                  }
                ]
              }
            );
          });

          return result;
        })()
      };
      this.pieChartOne.setOption(option);
      window.onresize = this.pieChartOne;
    }
  }
};
</script>
<style>
.body-cjw {
  height: 100%;
  overflow: auto;
}
.pd-10 {
  padding: 10px;
}
.text-white {
  color: white;
}
.text-label {
  font-size: 16px;
  font-weight: bold;
}
.menu {
  width: 100%;
}
</style>
